<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: ycb
 * @Date: 2022-03-23 16:39:29
 * @LastEditors: 晨博 闫 1169575854@qq.com
 * @LastEditTime: 2024-10-24 11:48:17
-->
<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>gb28181录像</title>
    <script src="./axios.min.js"></script>
</head>

<body>
    <div>
        <button onclick="query_index()">查询列表</button>
        <button onclick="vod_play()">播放</button>
        <video id="local_video" controls muted width="800" height="400"></video>
    </div>

    <script>
        var device = "34020000001320000066"
        var channel = "34020000001320000001"
        var start_time = "2024-12-01 00:00:00"
        var end_time = "2024-12-01 23:00:00"

        let stream_server = `192.168.1.195:8081`
        async function query_index() {
            let url = `http://${stream_server}/api/v1/gb28181/query/vod/list`
            let data = JSON.stringify({
                "device_id": device,
                "channel_id": channel,
                "start_time": start_time,
                "end_time": end_time
            })

            await axios({
                method: 'post',
                url: url,
                data: data
            }).then(async function (response) {
                alert(JSON.stringify(response.data, null, 2))
            });
        }

        async function player(stream_server, video) {
            // 本地的peer端
            // 创建网络连接
            let rtcpeer = new RTCPeerConnection(null);
            rtcpeer.ondatachannel = (event) => {
                var receiveChannel = event.channel;
                receiveChannel.onmessage = (recv_event) => {
                    console.log("收到:", recv_event.data)
                }
            };
            var mediastream = new MediaStream()
            // //设置音视频均为 recvonly
            rtcpeer.addTransceiver("video", {
                direction: "recvonly"
            })

            rtcpeer.addTransceiver("audio", {
                direction: "recvonly"
            })

            rtcpeer.ontrack = function (event) {

                mediastream.addTrack(event.track);
            }
            rtcpeer.onicecandidate = (e) => {
                console.log("触发ice")
                console.log(e)
            }

            rtcpeer.oniceconnectionstatechange = (e) => {
                // console.log("ice state changge:",e)
            }

            try {
                let sdp = null
                console.log("2.向远端发送offer")
                ///主动向远程终端发起视频会话请求
                await rtcpeer.createOffer({
                    offerToReceiveVideo: 1,
                }).then(des => {
                    ///设置视频源触发icecandidate事件 
                    rtcpeer.setLocalDescription(des);
                    console.log("设置本地描述")
                    sdp = des
                });

                if (sdp == null) {
                    console.log("sdp 为空")
                    return
                }

                console.log(sdp)
                let url = `http://${stream_server}/api/v1/stream/gb28181/vod/play`
                let recv_sdp_obj = null
                let data = JSON.stringify({
                    "device_id": device,
                    "channel_id": channel,
                    "player": {
                        "start_time": start_time,
                        "end_time": end_time,
                        "speed": 1
                    },
                    "sdp": sdp
                })
                await axios({
                    method: 'post',
                    url: url,
                    data: data
                }).then(async function (response) {

                    console.log(response.data)
                    video.srcObject = mediastream
                    await rtcpeer.setRemoteDescription(
                        new RTCSessionDescription(response.data.data.sdp)
                    );
                    video.play()
                });


            } catch (e) {
                console.log(e)
                alert(e)
            }

        }

        function vod_play() {
            player(stream_server, document.getElementById("local_video"))
        }





    </script>
</body>

</html>